<script setup>
import {onMounted, ref} from 'vue';
import {getEquipmentList, addEquipment, updateEquipment, deleteEquipment} from "@/api/equipment.js";
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from 'axios'


//自定义响应式数组
const tableData = ref([])
//查询按钮
const query = async() => {
  const response=await getEquipmentList(
      deviceId.value,
  )
  tableData.value = response.data
  console.log(response.data)
}


//添加按钮
const add = async () => {
  if (!disabled.value){
    const add=await addEquipment(equipment.value)
    ElMessage.success(add.data.message)
    await query
    await resetForm()
  }else {
    const update=await updateEquipment(equipment.value)
    ElMessage.success(update.data.message)
    await query
    await resetForm()

  }
  dialogFormVisible.value=false
}
//删除表单
const del = async (row) => {
  ElMessageBox.confirm(
      '确定要删除数据吗？',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async ()=>{
        const rows=await deleteEquipment(row.id)
        ElMessage(rows.data.message)
        await query
      }
  )
}



//定义一个设备管理对象
const equipment = ref({
  id:'',//    地址id
  name:'',//  视频名称
  deviceId:'', //  设备id
  accessProtocol:'',//  接入协议
  enable:'',//  是否启用
  transmissionProtocol:'',//  传输协议
  status:'',//  状态
  channel:'' //  通道
})


const equipment1 = ref({
  id:'',//    地址id
  name:'',//  视频名称
  deviceId:'', //  设备id
  accessProtocol:'',//  接入协议
  enable:'',//  是否启用
  transmissionProtocol:'',//  传输协议
  status:'',//  状态
  channel:'' //  通道
})
//重置表单
const resetForm = () => {
  equipment.value = {
    id:'',//    地址id
    name:'',//  视频名称
    deviceId:'', //  设备id
    accessProtocol:'',//  接入协议
    enable:'',//  是否启用
    transmissionProtocol:'',//  传输协议
    status:'',//  状态
    channel:'' //  通道
  }
}


//输入框绑定的响应式变量
const deviceId = ref('')//设备id




//定义是否为编辑状态的响应式变量
const disabled = ref(false)
//管理表单提交状态
const submitting = ref(false)
//控制是否打开添加对话框变量
const dialogFormVisible = ref(false);
const formLabelWidth = '140px'
//创建对象存取修改所用的对象内容(修改表单)
const updateI=(row)=>{
  equipment1.value=row
  dialogFormVisible.value=true
  //true表示可以修改
  disabled.value=true
  //将修改的数据赋值给对象
  Object.assign(equipment.value,row)
}



//导出文件的函数
const exportData = () => {
  ElMessageBox.confirm("你确认导出当前任务信息吗?", '导出', {
    type: 'warning', cancelButtonText: '取消', confirmButtonText: '确认', showClose: false }).then(() => {
    window.open('http://localhost:8080/address/export')
  }).catch()
}

//导入文件函数
const handleFileUpload = async (e) => {
  ElMessage.success('导入成功')
  query()
}




onMounted(()=>{
  query()
})

//定义验证规则
const rules = {
  name: [
    { required: true, message: '请输入视频名称', trigger: 'blur' },
    { min: 2, max:20 , message: '长度在 1 到 10 个字符', trigger: 'blur' }
  ],
  deviceId: [
    { required: true, message: '请输入设备id', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
  ],
  channel: [
    { required: true, message: '请输入通道', trigger: 'blur'},
    { min: 2, max: 20, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  accessProtocol: [
    { required: true, message: '请输入内容', trigger: 'blur'},
  ],
  enable: [
      { required: true, message: '请输入内容', trigger: 'blur'},
      ],
  transmissionProtocol: [
      { required: true, message: '请输入内容', trigger: 'blur'},
      ],
  status: [
      { required: true, message: '请输入内容', trigger: 'blur'},
      ],
}




</script>


    <template>
      <div class="equipment">
        <div class="header">

        <el-button-group class="operation-buttons">
          <el-button  @click="dialogFormVisible=true">
            <el-icon><Plus /></el-icon>
            添加设备
          </el-button>
          <el-button
              style="display: inline-block;margin-left: 10px"
              @click="exportData">
            <el-icon><Upload /></el-icon>
            导出
          </el-button>
          <el-upload
              style="display: inline-block;margin-left: 10px"
              action="http://localhost:8080/address/import"
              :show-file-list="false"
              :on-success="handleFileUpload">
            <el-button>
              <el-icon><Download /></el-icon>
              导入
            </el-button>
          </el-upload>

        </el-button-group>
        <!-- 搜索框 -->
        <div class="search-container">
          <el-input
              placeholder="请输入搜索内容"
              v-model="deviceId"
              class="search-input"
          >
          </el-input>
          <el-button
              type="primary"
              class="search-button"
              @click="query()"
          >
            <i class="el-icon-search"></i> 搜索
          </el-button>
         </div>
        </div>

        <el-row :gutter="20">
          <el-col :span="24">
           <el-table :data="tableData" style="width: 100%">
<!--             <el-table-column prop="id" label="编号" width="180" />-->
             <el-table-column prop="deviceId" label="设备id" width="180" />
             <el-table-column prop="name" label="设备名称" width="180" />
              <el-table-column prop="accessProtocol" label="接入协议" />
             <el-table-column prop="enable" label="是否启用" />
             <el-table-column prop="transmissionProtocol" label="传输协议" />
             <el-table-column prop="status" label="状态" />
             <el-table-column prop="channel" label="通道"/>
             <el-table-column
                 label="操作"
                 width="250px"
                 fixed="right"
             >
               <template #default="scope">
                 <el-button
                     type="primary"
                     size="small"
                     @click="updateI(scope.row)"
                 >
                   <el-icon><Edit /></el-icon>
                   编辑
                 </el-button>

                 <el-button
                     type="danger"
                     size="small"
                     @click="del(scope.row)"
                   >
                   <el-icon><Delete /></el-icon>
                   删除
                 </el-button>


               </template>
             </el-table-column>
           </el-table>
          </el-col>
        </el-row>



        <el-dialog v-model="dialogFormVisible" :title="disabled ? '编辑客户' : '新增客户'" width="500">
          <el-form
              ref="formRef"
              :rules="rules"
              :model="equipment">
            <el-form-item label="设备名称" :label-width="formLabelWidth" prop="name">
              <el-input v-model="equipment.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="设备id" :label-width="formLabelWidth" prop="deviceId">
              <el-input v-model="equipment.deviceId" autocomplete="off" />
            </el-form-item>
            <el-form-item label="接入协议" :label-width="formLabelWidth" prop="accessProtocol">
              <el-select v-model="equipment.accessProtocol" placeholder="Please select a zone">
                <el-option label="RTMP" value="RTMP" />
                <el-option label="HTTP-FLV" value="HTTP-FLV" />
                <el-option label="HLS" value="HLS"/>
                <el-option label="RTSP" value="RTSP"/>
                <el-option label="MPEG-DASH" value="MPEG-DASH"/>
              </el-select>
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth" prop="enable">
              <el-select v-model="equipment.enable" placeholder="Please select a zone">
                <el-option label="Yes" value="Yes" />
                <el-option label="No" value="No" />
              </el-select>
            </el-form-item>
            <el-form-item label="传输协议" :label-width="formLabelWidth" prop="transmissionProtocol">
              <el-select v-model="equipment.transmissionProtocol" placeholder="Please select a zone">
                <el-option label="UDP" value="UDP" />
                <el-option label="TCP" value="TCP" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
              <el-select v-model="equipment.status" placeholder="Please select a zone">
                <el-option label="正常" value="正常" />
                <el-option label="异常" value="异常" />
              </el-select>
            </el-form-item>

            <el-form-item label="通道" :label-width="formLabelWidth" prop="channel">
              <el-input v-model="equipment.channel" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="resetForm">
                重置
              </el-button>
              <el-button type="primary" @click="add" >
                提交
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
     </template>



<style scoped>
.equipment {
  padding: 50px;
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  align-items: center;
  width: 320px;
}
.search-container .el-input {
  flex: 1;
  margin-right: 10px;
}

</style>
